<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :model="data"
        :rules="rules"
        :class="{ 'hide-feed-back': hideFeedBack }"
    >
        <n-grid x-gap="16" y-gap="12" :cols="24">
            <template v-for="(item, index) in list" :key="index">
                <n-gi :span="item.span || 6" v-if="!item.isEmpty">
                    <n-form-item
                        :label="item.label"
                        :label-props="{
                            title: item.label,
                        }"
                        :path="item.key"
                    >
                        <FormItem
                            v-model:value="data[item.key]"
                            style="width: 100%"
                            :schema="item"
                            @update:val="(v) => onUpdateVal(item, v)"
                        />
                        <!-- 输入附件提示 tooltip-->
                        <n-tooltip trigger="hover" v-if="item.tooltip">
                            <template #trigger>
                                <i
                                    class="iconfont icon-info-circle icon-tooltip"
                                />
                            </template>
                            {{ item.tooltip }}
                        </n-tooltip>
                    </n-form-item>
                </n-gi>
            </template>
            <slot />
        </n-grid>
    </n-form>
</template>
<script setup>
import { ref, toRefs } from "vue";
import FormItem from "./FormItem.js";
const props = defineProps({
    list: {
        type: Array,
        defalut: () => [],
    },
    data: {
        type: Object,
        defalut: () => {},
    },
    rules: {
        type: Object,
        defalut: () => {},
    },
    hideFeedBack: {
        type: Boolean,
        defalut: () => false,
    },
});

const { list, data, rules, hideFeedBack } = toRefs(props);
const formRef = ref(null);

//表单校验
const validaForm = () => {
    return new Promise((resolve, reject) => {
        formRef.value?.validate((errors) => {
            if (errors) rulesError.value = errors;
            else rulesError.value = [];
            resolve(errors);
        });
    });
};

//表单项改变
const onUpdateVal = (item, val) => {
    item?.props.onUpdate && item.props.onUpdate(val);
};

defineExpose({
    validaForm,
});
</script>
<style lang="less" scoped>
.item-content {
    width: 100%;
}
.icon-tooltip {
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
    color: var(--text-color-base-2);
}
:deep(.n-form-item-label) {
    text-overflow: ellipsis;
    span {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }
}
.hide-feed-back {
    :deep(.n-form-item-feedback-wrapper) {
        display: none !important;
    }
}
</style>
